/**
 * @author shaosong
 * @description 全局搜索
 */
import { SearchOutlined } from '@ant-design/icons'
import { AutoComplete, Input } from 'antd'
import { DefaultOptionType } from 'antd/es/select'
import React, { useState } from 'react'
export class GlobalSearchProps {}

const GlobalSearch: React.FC<GlobalSearchProps> = props => {
  const [options, setOptions] = useState<any[]>([])

  const mockSearchResults = (query: string) => {
    return ['gmail.com', '163.com', 'qq.com'].map<DefaultOptionType>(
      domain => ({
        label: `${query}@${domain}`,
        value: `${query}@${domain}`
      })
    )
  }

  const handleSearch = (value: string) => {
    console.log(value)
    if (value) {
      setOptions(mockSearchResults(value))
    } else {
      setOptions([])
    }
  }

  const handleSelect = (value: string) => {
    console.log('You selected:', value)
  }

  return React.useMemo(
    () => (
      <>
        <AutoComplete
          className="w-48"
          options={options}
          onSearch={handleSearch}
          onSelect={handleSelect}
          placeholder="全局搜索..."
        >
          <Input className="w-28" suffix={<SearchOutlined />} />
        </AutoComplete>
      </>
    ),
    []
  )
}

export default GlobalSearch
